<template>
  <a-drawer
    :title="title"
    placement="left"
    :closable="false"
    @close="onClose"
    :visible="visible"
  >
    <div v-for="data in dataSource" :key="data.id"
         style="width: 100%; padding: 10px; margin: 10px; border: grey 1px dashed;">
      <a @click="selectOk(data)">
        <view-layout-row :rows="JSON.parse(data.tempBodyString)" :height="100"
                         :editable="false" :groupId="groupId"></view-layout-row>
      </a>
    </div>
  </a-drawer>
</template>

<script>

  import {getAction} from '@/api/manage'
  import ViewLayoutRow from "./ViewLayoutRow";
  import YchConstant from "@/api/YchConstant";

  export default {
    name: "ViewTemplateDrawer",
    components: {
      ViewLayoutRow
    },
    props: {
      appType: {
        type: String,
        default: 'pc'
      },
      groupId: {
        type: String,
        required: true
      },
    },
    data() {
      return {
        title: this.$t('m.eform.formDesign.label.mo-ban-lie-biao'),
        visible: false,
        url: {
          getTemplateList: YchConstant.PREFIX_EFORM + "/manage/actAppTemplate/listAll",
        },
        dataSource: [],
      }
    },
    methods: {
      onClose() {
        this.visible = false;
      },
      selectOk(data) {
        this.$emit('selectOk', data.tempBodyString);
        this.visible = false;
      }
    },
    watch: {
      appType: {
        handler(value) {
          getAction(this.url.getTemplateList, {
            tempType: "view",
            appType: value,
            // tempStructure: null
          }).then((res) => {
            if (res.success) {
              this.dataSource = res.result;
            } else {
              this.messageUtil.warning(res.message);
            }
          }).finally(() => {
          });
        },
        immediate: true
      }
    }
  }
</script>
